import React from "react"
import { Image, Text, View } from "@tarojs/components"
import GpRate from "@/components/GpRate"
import clsx from "clsx"
import { prettyNum } from "@/utils/common"
import { pageMapper, tabbarPages } from "@/constants/pageMap"
import { makePagePath, navigation } from "@/utils/router"
import Taro from "@tarojs/taro"

import styles from "./index.module.scss"

export type IProps = {
  className?: string
  showAdFlag?: boolean
  institution: IApiRelative.IHome.AgencyRecommendResult
}
type IState = {}
class GpInstitutionItemPure extends React.Component<IProps, IState> {
  constructor(props) {
    super(props)
    this.state = {}
  }
  handleJump = () => {
    // 导航到插件
    const url = makePagePath(
      tabbarPages.gpPluginInstitutionIndex,
      { id: this.props.institution.id },
      false,
      true
    )
    Taro.reLaunch({
      url: url
    })

    // navigation(
    //   tabbarPages.gpPluginInstitutionIndex,
    //   { id: this.props.institution.id },
    //   "reLaunch",
    //   false,
    //   true
    // )

    // navigation(
    //   pageMapper.institutionDetail,
    //   { id: this.props.institution.id },
    //   "reLaunch",
    //   false,
    //   true
    // )
    // 测试
    // navigation(pageMapper.institutionDetail, { id: 4 })
  }
  render(): React.ReactNode {
    const { className, showAdFlag = false, institution } = this.props
    console.log(29, institution)
    return (
      <View className={clsx(styles["wrap"], className)} onClick={this.handleJump}>
        <View className="w-170px h-170px box-border border border-solid border-hex-eee relative">
          <Image
            src={institution.logo as string}
            className="w-165px h-165px box-border"
            mode="scaleToFill"
          />
          {/* 广告flag */}
          {showAdFlag && <View className={styles["ad-flag"]}>广告</View>}
        </View>
        <View className="flex-1 ml-24px flex flex-col justify-center">
          <View className="flex flex-row justify-between items-center">
            <Text className="yahei font-normal text-32px text-hex-2c2c35 institution-name">
              {institution.name}
            </Text>
            {/* <View className="yahei font-normal text-24px text-hex-b8b8bf">
              {institution.distance}km
            </View> */}
          </View>
          <View className="flex flex-row items-center mt-14px">
            {institution.rate && (
              <GpRate
                rate={Number(institution.rate).toFixed(1) || 0}
                rateTextClassName={institution.rate ? "" : styles["rate-empty-cls"]}
              />
            )}
            <Text className="yahei font-normal text-24px text-hex-b8b8bf pl-12px">
              浏览 {prettyNum(institution.views as number)}
            </Text>
          </View>
          <View className="yahei font-normal text-24px text-hex-999 pt-14px pb-10px">
            {institution.projects?.join(" | ")}
          </View>
          <View className="flex flex-row items-center mt-12px">
            {institution.tags?.map((l, index) => (
              <Text
                key={index}
                className="yahei-ui font-normal text-24px text-hex-1a8cff h-36px rounded-8px border border-solid border-hex-1a8cffff bg-hex-f1fbff px-12px leading-36px mr-12px"
              >
                {l}
              </Text>
            ))}
          </View>
        </View>
      </View>
    )
  }
}
export default GpInstitutionItemPure
